<html>
  <head></head>
  <body>
    <div>
      <p>hash路由</p>
      <ul>
        <!-- 定义路由 -->
        <li><a href="#/home">home</a></li>
        <li><a href="#/about">about</a></li>
        <li><button onclick="locationToPage()">window.location</button></button></li>

        <!-- 渲染路由对应的 UI -->
        <div id="routeView"></div>
      </ul>
    </div>
    <script>
      // 获取 routeView
      let routerView = document.getElementById('routeView')

      // 监听 hashchange 事件
      window.addEventListener('hashchange', () => {
        console.log('hashchange-location',location);
        const hash = location.hash
        routerView.innerHTML = hash
      })

      // 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发
      window.addEventListener('DOMContentLoaded', () => {
        console.log('DOMContentLoaded-location',location);
        if (!location.hash) {
          // 如果不存在hash值，那么重定向到 #/
          location.hash = '#/'
        } else {
          // 如果存在hash值，那就渲染对应UI
          const hash = location.hash
          routerView.innerHTML = hash
        }
      })

      // 使用 window.location 方式跳转页面
      function locationToPage(){
        window.location = 'http://127.0.0.1:5500/VUE/vue003-hash%E8%B7%AF%E7%94%B1.html#/detail'
      }
    </script>
  </body>
</html>
